<template>
  <div>
    <a-tabs
      style="background: #fff; padding: 10px 20px; box-sizing: border-box"
      default-active-key="1"
      @change="callback"
    >
      <a-tab-pane key="1" tab="报警信息">
        <a-select default-value="选择设备名称" style="width: 200px; margin-right: 20px">
          <a-select-option value="lucy">12</a-select-option>
          <a-select-option value="jack">Jack</a-select-option>
        </a-select>
        <a-select default-value="选择要素" style="width: 200px; margin-right: 20px">
          <a-select-option value="lucy">选择要素</a-select-option>
        </a-select>
        <a-button type="primary" style="padding: 0 30px;background: #3C67F1;border: none">查询</a-button>
        <a-col style="text-align: right;margin-bottom: 20px;">
          <a-button icon="export" style="margin-right: 10px;border: 1px solid #B3D8FF;background: #ECF5FF;color: #409EFF;" type="primary" ghost>导出</a-button>
          <a-button icon="printer" type="primary" ghost style="border: 1px solid #B3D8FF;background: #ECF5FF;color: #409EFF;">打印</a-button>
        </a-col>
        <a-col>
          <a-table bordered :columns="columns">
          </a-table>
        </a-col>
      </a-tab-pane>
      <a-tab-pane key="2" tab="阈值配置" force-render>
        <a-row>
          <a-col :span="7">
            <a-card title="选择设备类型（单选）" style="width: 100%;text-align: center;">
              <a-radio-group v-model="value">
                <a-radio :style="radioStyle" :value="1">智能气象站</a-radio>
                <a-radio :style="radioStyle" :value="2">智能气象站</a-radio>
                <a-radio :style="radioStyle" :value="3">智能气象站</a-radio>
              </a-radio-group>
            </a-card>
          </a-col>
          <a-col :span="12">
            <a-card title="要素阀值配置" style="width: 90%;text-align: center;margin-left: 5%;">
              <a-row>
                <a-col :span="6">
                  <a-checkbox-group
                    name="checkboxgroup"
                    :options="plainOptions"
                  />
                </a-col>
                <a-col :span="18">
                  <div style="height: 50px;">
                    <a-input placeholder="Basic usage" style="width: 40%;"/>
                    ~
                    <a-input placeholder="Basic usage" style="width: 40%;"/>
                  </div>
                  <div style="height: 50px;">
                    <a-input placeholder="Basic usage" style="width: 40%;"/>
                    ~
                    <a-input placeholder="Basic usage" style="width: 40%;"/>
                  </div>
                  <div style="height: 50px;">
                    <a-input placeholder="Basic usage" style="width: 40%;"/>
                    ~
                    <a-input placeholder="Basic usage" style="width: 40%;"/>
                  </div>
                </a-col>
              </a-row>
            </a-card>

          </a-col>

        </a-row>
        <div style="text-align: right;width: 76.5%;margin: 30px 0">
          <a-button style="margin-right: 20px">
            取消
          </a-button>
          <a-button type="primary">
            确定提交
          </a-button>
        </div>
      </a-tab-pane>

    </a-tabs>
  </div>
</template>

<script>
  const plainOptions = ['气温', '降水', '相对湿度']
  export default {
    data() {
      return {
        plainOptions,
        radioStyle: {
          display: 'block',
          height: '50px'
        },
        value: 1,
        // 表头
        columns: [
          {
            title: '序号',
            dataIndex: 'name'
          },
          {
            title: '设备名称'
          },
          {
            title: '设备编号'
          },
          {
            title: '报警时间'
          },
          {
            title: '要素名称'
          },
          {
            title: '实时数据'
          },
          {
            title: '阈值范围'
          },
          {
            title: '预警状态',
            dataIndex: 'success',
            scopedSlots: {customRender: 'success'}
          },
          {
            title: '报警原因'
          },
          {
            title: '操作',
            dataIndex: 'action',
            scopedSlots: {customRender: 'action'}
          }
        ],
        // 向后端拉取可以用的操作列表
        permissionList: null,
        // 加载数据方法 必须为 Promise 对象
        loadData: parameter => {
          return this.$http
            .get('/mock/api/permission', {
              params: Object.assign(parameter, this.queryParam)
            })
            .then(res => {
              let result = res.result
              result.data.map(permission => {
                permission.actionList = JSON.parse(permission.actionData)
                return permission
              })
              return result
            })
        }
      }
    },
    methods: {
      callback(key) {
        console.log(key)
      }
    }
  }
</script>

<style scoped>
  /deep/ .ant-checkbox-wrapper {
    display: block;
    text-align: left;
    height: 50px;
  }
  /deep/ .ant-tabs-bar{
    border-bottom: none;
  }
</style>
